import { QuestionCircleFilled } from "@ant-design/icons"
import { Table, TableColumnsType, Tooltip } from "antd"
import React from "react"
import { useSelector } from "react-redux"

import { SFlex } from "@/components/common"
import PayoutStatus from "@/components/common/payoutStatus"
import { useLocale } from "@/locales"
import { AppState } from "@/stores"
import { handleTotalNumber } from "@/utils/util"

interface Props {
	loading: boolean
	proxyAccountInfo: any
}

const PeriodAgentIncomeStatisticsTable: React.FC<Props> = ({ loading, proxyAccountInfo }) => {
	const { newFormat } = useLocale()
	const { currency } = useSelector((state: AppState) => state.config)

	const incomeColumns: TableColumnsType = [
		{
			title: newFormat("funds.columns.incomeStatus"),
			dataIndex: "payoutStatus",
			key: "payoutStatus",
			align: "center",
			render: (text, record) => <PayoutStatus row={record} />
		},
		{
			title: newFormat("funds.columns.currentIncome"),
			dataIndex: "currentIncomeAmount",
			key: "currentIncomeAmount",
			align: "center",
			render: (text, record) => handleTotalNumber(currency.symbol, "USDT", record.currentIncomeAmount)
		},
		{
			title: newFormat("funds.columns.incomeAdjustment"),
			dataIndex: "adjustIncomeAmount",
			key: "adjustIncomeAmount",
			align: "center",
			render: (text, record) => handleTotalNumber(currency.symbol, "USDT", record.adjustIncomeAmount)
		},
		{
			title: (
				<span>
					{newFormat("funds.columns.adjustedIncome")}
					<Tooltip title={newFormat("funds.fund_audit.real_income_amount_tips")}>
						<QuestionCircleFilled />
					</Tooltip>
				</span>
			),
			dataIndex: "realIncomeAmount",
			key: "realIncomeAmount",
			align: "center",
			render: (text, record) => handleTotalNumber(currency.symbol, "USDT", record.realIncomeAmount)
		},
		{
			title: newFormat("funds.columns.remarks"),
			dataIndex: "remarks",
			key: "remarks",
			align: "center",
			render: (text, record) => (
				<span>
					{record.audit1Desc ? `${newFormat("funds.proxy_member_funds_record.frirst_audit")}：${record.audit1Desc}` : "-"}
					<br />
					{record.audit2Desc ? `${newFormat("funds.proxy_member_funds_record.second_audit")}：${record.audit2Desc}` : "-"}
				</span>
			)
		}
	]

	return (
		<SFlex vertical>
			<Table
				size="small"
				className="small-size-table"
				dataSource={proxyAccountInfo}
				columns={incomeColumns}
				pagination={false}
				rowKey="userName"
				style={{ width: "100%", margin: "15px 0" }}
				loading={loading}
			/>
		</SFlex>
	)
}

export default PeriodAgentIncomeStatisticsTable
